<template>
	<view class="">
		<navBar title="电影/影院" />
		<view class="header u-p-30 u-flex u-row-between">
			<view class="u-flex-col u-p-r-100">
				<view class="u-m-b-15 u-font-30">{{cinemaDetail.cinemaName}}</view>
				<view class="u-line-2 u-font-26 u-type-info-dark u-m-b-10">{{cinemaDetail.address}}</view>
				<view class="u-type-warning-dark">电影院热线：<text @click="call">{{cinemaDetail.tel}}</text></view>
			</view>
			<view @click="toAppMap">
				<img src="@/static/moive/adress.png" style="width: 70rpx;">
			</view>
		</view>
		<view class="swiper-box">
			<swiper class="swiper" @change="swiperChange" :current="current" previous-margin="10rpx">
				<swiper-item class="swiperItem u-p-l-10 u-p-r-10" v-for="(item,index) in moiveList" :key="index" @click="swiperItem(index)">
					<u-image :class="[current==index?'active':'']" :src="item.poster" width="100%" height="100%"
						border-radius="12" mode="scaleToFill"></u-image>
				</swiper-item>
			</swiper>
		</view>
		<view v-if="moiveList.length>0">
			<view class="u-font-34 u-f-w u-flex u-row-center u-m-t-16">{{moiveList[current].movieName}}</view>
			<view class="u-font-26 u-m-t-10" style="color:  #909399;text-align: center;">
				{{moiveList[current].duration}}分钟｜{{moiveList[current].movieType}}
			</view>
		</view>

		<view class="u-m-t-30" style="border-top: 1px solid #f2f2f2;border-bottom: 1px solid #f2f2f2;"
			v-if="moreDate.length>0">
			<u-tabs active-color="#FF6801" inactive-color="#606266" :list="moreDate"
				:is-scroll="moreDate.length>3?true:false" :current="curIndex" @change="change"></u-tabs>
		</view>
		<view class="u-p-20 tips u-flex u-row-between" @click="show = true">
			<view>
				<u-tag text="提示" type="warning" mode="dark" size="mini" />
				<text class="u-type-warning-dark u-p-l-30 u-font-26">请提前一小时购票</text>
			</view>
			<u-icon name="arrow-right"></u-icon>
		</view>

		<view class="u-p-l-30 u-p-r-30" v-if="movePlanList.length>0">
			<view v-for="(item,index) in movePlanList" :key="index" class="u-flex u-row-between u-p-b-30 u-p-t-30"
				style="border-bottom: 1px solid #f2f2f2;">
				<view class="u-flex-2">
					<view class="u-font-40 u-f-w">{{item.startTime}}</view>
					<view class="u-font-24 u-type-info">{{item.stopTime}}散场</view>
				</view>
				<view class="u-flex-4">
					<view class="u-line-2 u-font-24 u-p-b-10">
						<!-- {{item.language}} -->{{item.planType}}
					</view>
					<view class="u-line-2 u-font-24 u-type-info" style="width: 220rpx;">{{item.hallName}}</view>
				</view>
				<view class="u-flex-2">
					<view class="u-type-warning u-font-36 u-f-w">¥{{item.discountPrice}}</view>
					<view class="u-type-info u-font-24 u-m-t-20" style="text-decoration: line-through;">
						¥{{item.marketPrice}}
					</view>
				</view>
				<view class="u-flex-1">
					<u-button type="warning" size="mini" shape="circle" @click="buyTick(item)">购票</u-button>
				</view>
			</view>
		</view>
		<view v-else class="u-flex-col u-col-center u-p-30 u-m-t-30">
			<img src="@/static/moive/moive-empty.png" style="width: 100rpx;">
			<view class="u-p-t-20 u-type-info">今日场次已映完</view>
		</view>
		<u-modal v-model="show" :content="content" :confirm-color="$u.color.warningDark"></u-modal>
		<u-picker mode="selector" v-model="mapShow"  :default-selector="[1]" :range="selectorObj" range-key="cateName" :confirm-color="$u.color.warningDark" @confirm="confirm"></u-picker>
	</view>
</template>
<script>
	import navBar from '@/components/navbar/index'
	export default {
		data() {
			return {
				cinemaDetail: {},
				current: 0,
				moiveList: [],
				moreDate: [],
				curDate: '', // 当前时间
				movePlanList: [],
				curIndex: 0,
				show: false,
				content: '特惠购票出票需等待(不超过1个小时)，请提前购票哦！',
				mapShow:false,
				selectorObj:[{
					'cateName':'高德地图',
					'id':0
				},{
					'cateName':'百度地图',
					'id':1
				}]
			}
			
		},
		components: {
			navBar
		},
		mounted() {
			this.cinemaDetail = JSON.parse(this.$route.query.cinemaData);
			this.getFilmList();
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
		},
		methods: {
			swiperItem(index){
				this.current = index;
			},
			confirm(val){
				let lat = uni.getStorageSync('lat');
				let lng = uni.getStorageSync('lng');
				if(val[0]==0){
					window.location.href=`https://uri.amap.com/marker?position=${lat},${lng}&name=${this.cinemaDetail.cinemaName}&content=${this.cinemaDetail.address}&output=html`
				}else{
					window.location.href=`http://api.map.baidu.com/marker?location=${lng},${lat}&title=${this.cinemaDetail.cinemaName}&content=${this.cinemaDetail.address}&output=html`
				}
			},
			toAppMap() {
				this.mapShow = true;
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.cinemaDetail.tel
				});
			},
			getFilmList() {
				this.$u.api.getCinemaFilmList({
					cinemaId: this.cinemaDetail.id
				}).then(res => {
					this.moiveList = res.data
					if (res.data.length > 0) {
						let curIndex = 0
						// 寻找当前电影
						if (this.movieId) {
							let findIndex = res.data.findIndex(item => item.id == this.movieId)
							// 没有找到当前电影需要显示第一个电影，（此情况是）
							if (findIndex != -1) {
								curIndex = findIndex
							} else {
								curIndex = 0
							}
						} else {
							curIndex = 0
						}
						this.curIndex = curIndex
						this.getDate(res.data[curIndex].startTime)
						//this.pageLoading = false
						// this.getMoviePlanList()
					} else {
						this.pageLoading = false
					}
				})
			},
			swiperChange(e) {
				this.current = e.detail.current;
				this.curIndex = 0;
				this.getDate(this.moiveList[e.detail.current].startTime);
			},
			getDate(dateValue) {
				let _dateValue = Array.from(new Set(dateValue)).sort();
				let weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
				let today = this.$u.timeFormat(new Date())
				let tomorrow = this.$u.timeFormat(new Date(new Date().getTime() + 24 * 60 * 60 * 1000))
				let tomorrowMore = this.$u.timeFormat(new Date(new Date().getTime() + 2 * 24 * 60 * 60 * 1000))
				let newDate = []
				let _moreDate = [{
					type: '今天',
					value: today
				}, {
					type: '明天',
					value: tomorrow
				}, {
					type: '后天',
					value: tomorrowMore
				}]
				for (let i = 0; i < _dateValue.length; i++) {
					let cur = _moreDate.findIndex(item => item.value == _dateValue[i])
					if (cur != -1) {
						newDate.push({
							name: `${_moreDate[cur].type} ${new Date(_dateValue[i]).getMonth() + 1}月${new Date(_dateValue[i]).getDate()}日`,
							value: _moreDate[cur].value
						})
					} else {
						newDate.push({
							name: `${weeks[new Date(_dateValue[i]).getDay()]} ${new Date(_dateValue[i]).getMonth() + 1}月${new Date(_dateValue[i]).getDate()}日`,
							value: _dateValue[i]
						})
					}
				}
				this.moreDate = newDate
				this.curDate = this.moreDate[0].value
				this.getMoviePlanList()
			},
			change(val) {
				this.curIndex = val;
				this.curDate = this.moreDate[val].value;
				this.getMoviePlanList()
			},
			getMoviePlanList() {
				this.$u.api.moviePlanList({
					cinemaId: this.cinemaDetail.id, //影院id
					date: this.curDate, //时间
					movieId: this.moiveList[this.current].id, //影片id
				}).then(res => {
					if (res.code == 0) {
						this.movePlanList = res.data;
					}
				})
			},
			buyTick(item){
				uni.navigateTo({
					url:'/pages/moive/seat?planData='+JSON.stringify(item)+'&curDate='+this.moreDate[this.curIndex].name
				})
			}

		}
	}
</script>

<style scoped>
	.header {
		background-image: url(@/static/moive/ciname.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.swiper-box {
		background-image: url(@/static/moive/swiperBg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 320rpx;
		display: flex;
		align-items: center;
	}

	.swiper {
		width: 100%;
		height: 240rpx;
	}

	>>>.uni-swiper-slide-frame {
		display: flex;
		justify-content: center;
	}

	.swiperItem {
		width: 180rpx !important;
	}

	.active {
		border: 4rpx solid white;
	}

	.tips {
		border-bottom: 1px solid rgb(242, 242, 242);
		background-color: rgb(255 248 244);
		color: #ff7614;
	}

	.active>>>.u-image__image {
		transform: scale(1.15);
	}
</style>
